import { changeCoffeeCountSelection } from "@/store/modules/coffeeSelection";
import { Button } from "antd";
import React, { FC, memo, ReactNode } from "react";
import { useDispatch } from "react-redux";
import { CountSelectionWrapper } from "./style";

interface Iprops {
  children?: ReactNode;
  count: number;
}

const CountSelection: FC<Iprops> = memo((props) => {
  const { count } = props;
  const dispatch = useDispatch();

  const countBtn = (num: number) => {
    if (count === 1 && num < 0) return;
    dispatch(changeCoffeeCountSelection(num));
  };

  return (
    <CountSelectionWrapper>
      <p className="title">数量</p>
      <Button
        shape="circle"
        disabled={count <= 1}
        onClick={() => {
          countBtn(-1);
        }}
      >
        -
      </Button>
      <p className="count">{count} 杯</p>
      <Button
        shape="circle"
        onClick={() => {
          countBtn(1);
        }}
      >
        +
      </Button>
    </CountSelectionWrapper>
  );
});

export default CountSelection;
